<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>确认支付</title>
    <link rel="stylesheet" href="//cdn.bootcss.com/weui/1.1.1/style/weui.min.css">
    <link rel="stylesheet" href="//cdn.bootcss.com/jquery-weui/1.0.1/css/jquery-weui.min.css">
    <style type="text/css">

        * {
            padding: 0;
            margin: 0;
        }

        body {
            font: 12px "微软雅黑", Arial;
            background: #efeff4;
            min-width: 320px;
            max-width: 640px;
            color: #000;
        }

        a {
            text-decoration: none;
            color: #666666;
        }

        a,
        img {
            border: none;
        }

        img {
            vertical-align: middle;
        }

        ul,
        li {
            list-style: none;
        }

        em,
        i {
            font-style: normal;
        }

        .clear {
            clear: both
        }

        .clear_wl:after {
            content: ".";
            height: 0;
            visibility: hidden;
            display: block;
            clear: both;
        }

        .fl {
            float: left
        }

        .fr {
            float: right
        }

        .all_w {
            width: 91.3%;
            margin: 0 auto;
        }

        .header {
            background: #393a3e;
            color: #f5f7f6;
            height: auto;
            overflow: hidden;
        }

        .gofh {
            float: left;
            height: 45px;
            display: -webkit-box;
            -webkit-box-orient: horizontal;
            -webkit-box-pack: center;
            -webkit-box-align: center;
        }

        .gofh a {
            padding-right: 10px;
            border-right: 1px solid #2e2f33;
        }

        .gofh a img {
            width: 40%;
        }

        .ttwenz {
            float: left;
            height: 45px;
        }

        .ttwenz h4 {
            font-size: 16px;
            font-weight: 400;
            margin-top: 2px;
        }

        .ttwenz h5 {
            font-size: 12px;
            font-weight: 400;
            color: #6c7071;
        }

        .wenx_xx {
            text-align: center;
            font-size: 16px;
            padding: 28px 0;
        }

        .wenx_xx .goods_price {
            margin: 20px auto;
            font-size: 45px;
        }

        .skf_xinf {
            height: 43px;
            border-top: 1px solid #ddd;
            border-bottom: 1px solid #ddd;
            line-height: 43px;
            background: #FFF;
            font-size: 12px;
            overflow: hidden;
        }

        .skf_xinf .bt {
            color: #767676;
            float: left;
        }

        .call_pay_but {
            border-radius: 3px;
            height: 45px;
            line-height: 45px;
            background: #44bf16;
            display: block;
            text-align: center;
            font-size: 16px;
            margin-top: 24px;
            color: #fff;
        }

        .cancel_btn {
            border-radius: 3px;
            height: 45px;
            line-height: 45px;
            background: #CCCCCC;
            display: block;
            text-align: center;
            font-size: 16px;
            margin-top: 20px;
            color: #fff;
        }


        .toastTip {
            margin: 10px 0 30px 0;
            padding: 20px 0 0;
            text-align: center;
        }

        .toastTip span {
            margin: 0 10px;
            font-size: 18px;
            color: #2AC845;
        }

        .pay_success_result, .pay_fail_result {
            font-size: 12px;
            color: gray;
            border-top: 1px solid #ddd;
            border-bottom: 1px solid #ddd;
            background: #ffffff;
            padding: 10px 0;
        }

        .pay_result_item {
            width: 100%;
            height: 25px;
        }

        .pay_result_item > div:nth-child(1) {
            float: left;
            padding-left: 10px;
        }

        .pay_result_item > div:nth-child(2) {
            float: right;
            padding-right: 10px;
        }

        .wechat-pay-logo {
            position: fixed;
            width: 100%;
            z-index: 999;
            bottom: 40px;
            text-align: center;
        }
    </style>
</head>

<body>
<div style="margin: 0 auto">
<div id="payContent">
<div class="wenx_xx">
    <div class="mz">${pay['goodsName']}</div>
    <div class="goods_price">￥${pay['goodsPrice']!0/100}</div>
    <% if (pay["env"] == "TEST") {%>
    <div style="font-size:12px;color:#ff0000;">此为测试环境，实际支付金额为0.01元，且不为购买凭证!</div>
    <% } %>
</div>
<div class="skf_xinf">
    <div class="all_w">
        <span class="bt">收款方</span> <span class="fr">爱康健维</span>
    </div>
</div>
<a href="javascript:callPay();" class="call_pay_but all_w">立即支付</a>

<a href="javascript:cancelPay();" class="cancel_btn all_w">取消</a>
</div>
<div id="paySuccess" style="display:none">
    <div class="toastTip">
        <i class="weui-icon-success weui-icon_msg" style="font-size:48px;"></i>
        <span>订单支付成功!</span>
    </div>

    <div class="pay_success_result">
        <div class="pay_result_item">
            <div>商品名称</div>
            <div>${pay['goodsName']}</div>
        </div>
        <div class="pay_result_item">
            <div>应付金额</div>
            <div id="totalFee"></div>
        </div>
        <div class="pay_result_item">
            <div>实际支付</div>
            <div id="payFee"></div>
        </div>
        <div class="pay_result_item">
            <div>支付方式</div>
            <div id="payType"></div>
        </div>
        <div class="pay_result_item">
            <div>微信订单号</div>
            <div id="transId"></div>
        </div>
        <div class="pay_result_item">
            <div>商户订单号</div>
            <div>${pay['orderId']}</div>
        </div>
        <div class="pay_result_item">
            <div>支付时间</div>
            <div id="payTime"></div>
        </div>
        <div class="pay_result_item">
            <div>支付状态</div>
            <div id="payStat"></div>
        </div>
    </div>

    <a href="javascript:closeWin();" class="cancel_btn all_w">关闭窗口</a>
</div>
<div id="payFail" style="display:none">
    <div class="toastTip">
        <i class="weui-icon-warn weui-icon_msg" style="font-size:48px;"></i>
        <span style="color: #FF0000;">订单支付失败!</span>
    </div>

    <div class="pay_fail_result">
        <div class="pay_result_item">
            <div>商户订单号</div>
            <div>${pay['orderId']}</div>
        </div>

        <div class="pay_result_item">
            <div>原因</div>
            <div id="failReason">${pay['errorDes']!"商品不存在或已经下架!"}</div>
        </div>
    </div>

    <a href="javascript:closeWin();" class="cancel_btn all_w">关闭窗口</a>
</div>

<div class="wechat-pay-logo">
    <img src="${base}/static/img/wx-pay-log.jpg" />
</div>
</div>
</body>
<script src="//cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="//cdn.bootcss.com/jquery-weui/1.0.1/js/jquery-weui.min.js"></script>
<script type="text/javascript">

    var result = '${pay['result']}'

    $(function(){
        if (result == 'FAIL') {
            $('#payContent').hide();
            $('#payFail').show();
        }
    });

    function callPay(){
        WeixinJSBridge.invoke('getBrandWCPayRequest',{
            "appId" : "${pay['appId']}",
            "timeStamp" : "${pay['timeStamp']}",
            "nonceStr" : "${pay['nonceStr']}",
            "package" : "${pay['package']}",
            "signType" : "MD5",
            "paySign" : "${pay['paySign']}"
        },function(res){
            if(res.err_msg == "get_brand_wcpay_request:ok"){
                document.title='支付完成';
                $.showLoading();
                queryPayResult();
            }else if(res.err_msg == "get_brand_wcpay_request:cancel"){
                document.title='支付取消';
                $('#payContent').hide();
                $('#payFail').show();
                $('#paySuccess').hide();
                $('#failReason').html('用户取消支付');
            }else{
                document.title='支付失败';
                $('#payContent').hide();
                $('#payFail').show();
                $('#paySuccess').hide();
                $('#failReason').html('支付失败,请稍等再试');
            }
        })
    }

    function cancelPay() {
        $.confirm({
            title: '取消支付',
            text: '您确定要取消支付吗? :(',
            onOK: function () {
                $.toast('订单保留15分钟!', 'text');
                setTimeout(function () {
                   closeWin();
                }, 2000);
            }
        });
    }

    function queryPayResult() {
        $.post('${base}/wechat/queryOrderPay.do', {orderId:'${pay['orderId']}'}, function (result) {
            var data = result.data;
            if(data.result == 'SUCCESS') {
                $('#totalFee').html((data.totalFee/100).toFixed(2)+' 元');
                $('#payFee').html((data.cashFee/100).toFixed(2)+' 元');
                $('#payType').html(data.bank);
                $('#transId').html(data.transId);
                $('#payTime').html(data.timeEnd);
                $('#payStat').html(data.state);

                $('#payContent').hide();
                $('#payFail').hide();
                $('#paySuccess').show();
            } else {
                $('#failReason').html(data.errCodeDesc);

                $('#payContent').hide();
                $('#payFail').show();
                $('#paySuccess').hide();
            }
            $.hideLoading();
        }, 'json');


    }

    function closeWin() {
        window.location.href = '${base}/front/personal/home.do';
    }
</script>

</html>
